<template>
	<view class="container">
		<view class="status" :style="`height: ${setting.config?.statusBarHeight}px; width: '100%';background:#000`">
		</view>
		<rui-pages-header :data="user" :name="title || name">
			<view class="menu" v-if="name != 'pages.index.index' && name != 'pages.user.login.login'">

				<view class="menu_item" @click="$rui.route(go == 'home'?'pages/index/index':{type: 'back'})">
					<rui-icons :type="go == 'home' ?'home':'left'" size="18"></rui-icons>
					<view class="menu_item_name">
						{{go == 'home' ?'返回首页': '返回上页'}}
					</view>
				</view>

				<view class="menu_item" :class="route == item.url?'current':''" v-for="(item, index) in bar"
					:key="index" @click="$rui.route(item.url)" v-if="isAuth">
					<rui-icons :type="item.icon" size="18" :color="route == item.url?'#fff':'#000'"></rui-icons>
					<view class="menu_item_name">
						{{item.name}}
					</view>
				</view>
			</view>
		</rui-pages-header>

		<view class="container_box" :style="`height: ${setting.config?.windowHeight}px; width: '100%'`" v-if="isAuth">
			<slot></slot>
		</view>
		<view class="auth" v-else>
			<view class="auth_icon">
				<rui-icons type="notAuth" size="70"></rui-icons>
			</view>
			<view class="auth_name">
				您未开通权限
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	import {
		settingStore
	} from '@/store';

	let props = defineProps({
		bar: Array,
		go: {
			type: String,
			default: "home"
		},
		title: String
	})

	let setting = settingStore();
	let user = ref({});
	let isAuth = ref(true)

	let pages = getCurrentPages();
	let route = pages[pages.length - 1].route;

	let name = route.split("/").join(".") ?? 'pages.index.index';


	uni.$once('user', function(data) {
		console.log('on', data)
		//监听是否退出
		checkLogin();
	})

	const checkLogin = () => {
		let url = 'pages/user/login/login';
		user.value = uni.$rui.cache.get('USER_INFO') || {};
		//检测权限
		if (!route.includes(url)) {
			checkPermission();
		}

		if (route.includes(url) || user.value.nickname) {
			return;
		}
		uni.$rui.route({
			type: "reLaunch",
			url
		})
	}
	const checkPermission = () => {
		let permission = pages[pages.length - 1].$page.meta.permission
		let role = Number(user.value.role);
		// console.log('权限检测', permission , user.value)
		isAuth.value = (permission & role) === role;
	}
	// checkLogin();

	const toBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.auth {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;

		&_name {
			font-size: 16px;
		}
	}

	.menu {
		display: flex;
		align-items: center;

		.current {
			background: var(--color);
			color: #fff;
			border: 3px solid var(--color);
		}

		&_item {
			border-radius: 10px;
			border: 3px solid #f7f8f9;
			box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
			background: linear-gradient(to bottom, #ebeff7, #fff);
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 8px 10px;
			margin: 0 5px;

			&_name {
				margin-left: 5px;
			}
		}
	}

	.container {
		&_box {
			padding: 0 15px 0;
			overflow-y: scroll;

			/* 整个滚动条 */
			&::-webkit-scrollbar {
				width: 2px;
				/* 滚动条的宽度 */
				height: 12px;
				/* 滚动条的高度 */
			}

			/* 滚动条上的滚动滑块 */
			&::-webkit-scrollbar-thumb {
				background-color: darkgrey;
				/* 滑块颜色 */
				border-radius: 10px;
				/* 滑块圆角 */
				border: 2px solid orange;
				/* 滑块边框 */
			}

			/* 滚动条轨道 */
			&::-webkit-scrollbar-track {
				background: var(--bg);
				/* 轨道颜色 */
			}
		}
	}
</style>